<template>
  <div class="loading-wrap">
    <svg width="50px" height="50px" :style="{transform:'scale('+ scale + ')'}">
      <circle
        cx="25"
        cy="25"
        r="20"
        fill="transparent"
        stroke-width="3"
        stroke-dasharray="31.415, 31.415"
        stroke="#02bcfe"
        stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0, 25 25;360, 25 25"
          :dur="halfDur"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          :values="outColor"
          :dur="dur"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="25"
        cy="25"
        r="10"
        fill="transparent"
        stroke-width="3"
        stroke-dasharray="15.7, 15.7"
        stroke="#3be6cb"
        stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="360, 25 25;0, 25 25"
          :dur="halfDur"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          :values="inColor"
          :dur="dur"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    <div class="loading-tip">
      <slot />
    </div>
  </div>
</template>

<script>
// import autoResize from '../../../mixin/autoResize'
export default {
  name: 'HzxLoading',
  props: {
    outerColor: {
      type: Array,
      default: () => ['#02bcfe', '#3be6cb', '#02bcfe']
    },
    innerColor: {
      type: Array,
      default: () => ['#3be6cb', '#02bcfe', '#3be6cb']
    },
    duration: {
      type: Number,
      default: () => 3000
    },
    scale: {
      type: Number,
      default: () => 1
    }
  },
  data() {
    return {

    }
  },
  computed: {
    dur() {
      return this.duration / 1000 + 's'
    },
    halfDur() {
      return this.duration / 2000 + 's'
    },
    inColor() {
      return this.innerColor.join(';')
    },
    outColor() {
      return this.outerColor.join(';')
    }
  },
  watch: {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>
<style lang="less">
    .loading-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .loading-tip {
        font-size: 15px;
      }
    }
</style>
